<template>
  <div class="wall">
    <h1>我的评论</h1>
    <div class="content">
      <div v-if="loading">
        <el-card
          shadow="hover"
          v-for="(item, index) in commentsData"
          :key="index"
          @click="showDialog(item)"
        >
          <div class="time-display">
            <span style="color: #999999; padding: 0 15px"
              >{{ item.createTime }}
            </span>
          </div>
          <div class="question-comments">
            <div class="question-comments-content">
              {{ item.commentContent }}
            </div>
            <p class="content-question" v-if="item.pid">
              回复评论：{{ item.parentComment }}
            </p>
            <p class="content-question" v-else>
              回复题目：{{ item.questionTitle }}
            </p>
          </div>
        </el-card>



        <div class="el-table__empty-block" v-if="commentsData.length == 0">
         <span class="el-table__empty-text">暂无数据</span>
        </div>
      </div>

      <div class="page">
        <el-pagination
          v-model="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="查看评论" width="700">
      <h1>题目：{{ currentQuestion.questionTitle }}</h1>

      <div class="post-card" v-if="loading">
        <div
          v-for="(item, index) in question_comments"
          :key="index"
          style="border-top: 1px solid #ebeef5; padding: 10px 0"
        >
          <div style="display: flex; position: relative">
            <el-avatar :src="item.avatar" class="avatar"></el-avatar>
            <div class="post-info">
              <div class="username-level">
                <span class="username">{{ item.nickName }}</span>
                <span v-if="item.parentNickName"
                  >回复：{{ item.parentNickName }}</span
                >
              </div>
              <div class="post-time">{{ item.createTime }}</div>
            </div>
            <div
              class="delete-card"
              v-if="item.studentId == useStudentStore().studentInfo.studentId"
            >
              <span></span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="iconfont icon-a-13Ashenglve"></i>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="deleteComment(item.id)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <div class="post-content">
            <p :id="currentQuestion.commentContent == item.commentContent && currentQuestion.studentId == item.studentId ? 'currentComment' : ''">{{ item.commentContent }}</p>
          </div>
          <div
            style="
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
            "
          >
            <span
              style="font-size: 14px; cursor: pointer"
              @click="click_Reply(item)"
              >回复</span
            >
            <span
              style="cursor: pointer; margin: 0 10px"
              v-if="item.isLike == 0"
              @click="click_thumbs(item, index)"
            >
              <i class="iconfont icon-dianzan1"></i>{{ item.likes }}
            </span>
            <span
              style="cursor: pointer; margin: 0 10px; color: blue"
              v-else
              @click="click_thumbs(item, index)"
            >
              <i class="iconfont icon-dianzan"></i>{{ item.likes }}
            </span>
          </div>

          <div class="reply" v-if="item.id == isReplyId">
            <div class="chat-input-container">
              <el-input
                v-model="replyContent"
                style="width: 580px"
                autosize
                resize="none"
                :rows="5"
                type="textarea"
                show-word-limit
                placeholder="请开始你的表演"
                ref="refInput"
              />
              <div
                style="
                  display: flex;
                  justify-content: flex-end;
                  margin-top: 10px;
                "
              >
                <el-button type="primary" @click="submitComment"
                  >评论</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import {  nextTick, reactive, ref,watch } from "vue";
import axios from "@/axios/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStudentStore } from "@/stores/student";
import { throttle } from "lodash";

//评论集合
let commentsData = reactive([]);
//加载
let loading = ref(false);
//当前页
let currentPage = ref(1);

//总条数
let total = ref(10);

//当前问题
let currentQuestion = ref();

//回复内容
let replyContent = ref();

let dialogVisible = ref(false);

//问题的所有评论
let question_comments = ref([]);

//是否回复id
let isReplyId = ref("");

//输入框聚焦
let refInput =ref()

//要回复的评论对象
let replyComment = reactive({});


/**发布回复评论*/
function submitComment() {
  replyContent.value=replyContent.value.trim()
  if (replyContent.value == '' || replyContent.value == null) {
    ElMessage({
        message: "回复评论不能为空",
        type: "Message",
      });
  }else{
    axios
    .post(
      "/api/v1/front/questionsComment",
      {
        studentId: useStudentStore().studentInfo.studentId,
        questionId: replyComment.questionId,
        commentContent: replyContent.value,
        pid: replyComment.id,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((resp) => {
      ElMessage({
        message: "评论成功",
        type: "success",
      });
      isReplyId.value = "-1";
      console.log(resp);
      replyContent.value = "";
      showDialog(replyComment);
    });
  }

}

/** 点击回复时*/
function click_Reply(item) {
  isReplyId.value = item.id;
  replyComment = item;
  replyContent.value = "";
  nextTick(() => {
     refInput.value[0].focus(); 
  })
}

/**获取评论*/
const getComments = () => {
  loading.value = false;
  axios
    .get(`api/v1/front/questionsComment`, {
      params: {
        studentId: useStudentStore().studentInfo.studentId,
        current: currentPage.value,
        size: 4,
      },
    })
    .then((resp) => {
      loading.value = true;
      commentsData = resp.data.data.records;
      total.value = parseInt(resp.data.data.total);
    });
};

getComments();

/** 切换当前页时*/
function handleCurrentChange(val) {
  currentPage.value = val;
  getComments();
}

/** 点击评论时*/
function showDialog(item) {
  loading.value = false;
  currentQuestion.value = item;
  axios
    .get(
      `api/v1/front/questionsComment/showAllComments`,{params:{
        questionId:item.questionId,
       studentId: useStudentStore().studentInfo.studentId
      }}
    )
    .then((resp) => {
      loading.value = true;
      question_comments.value = resp.data.data;
    });
  dialogVisible.value = true;
}

//防抖  限制500毫秒内只能点击一次
const click_thumbs = throttle(thumbs,500)

/** 点赞逻辑 */
function thumbs(item, index) {
  axios
    .get("/api/v1/front/commentLike", {
      params: {
        studentId: useStudentStore().studentInfo.studentId,
        commentId: item.id,
        isLike: item.isLike,
      },
    })
    .then((resp) => {
      question_comments.value[index].likes = resp.data.data.likes;

      if (item.isLike == 1) {
        question_comments.value[index].isLike = 0;
      } else {
        question_comments.value[index].isLike = 1;
      }
    });
}

/** 删除评论*/
function deleteComment(id) {
  console.log('reolycomment',currentQuestion.value);
  
  ElMessageBox.confirm("确定删除评论回复吗？操作后不可恢复", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "返回",
    type: "warning",
  })
    .then(() => {
      axios
        .delete("/api/v1/front/questionsComment", { params: { commentId: id } })
        .then((resp) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          
          showDialog(currentQuestion.value)
        });
    })
    .catch(() => {
      //取消删除逻辑
    });
}

watch(dialogVisible,(newValue, OldValue, onCleanup)=>{
  getComments()
})

</script>

<style lang="less" scoped>
@import "https://at.alicdn.com/t/c/font_4465050_j6ra9xdv3vf.css";
h1 {
  font-size: 30px;
  font-weight: normal;
  margin: 0;
  flex-shrink: 0;
}
.wall {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #a3a3a3;
}

.content {
  position: relative;
  padding: 10px;
  height: 100%;
  border: 1px solid #a3a3a3;
  flex-shrink: 1;
}

.question-comments {
  margin-top: 10px;
  padding: 10px;
  cursor: pointer;
}

.question-comments-content {
  color: #333333;
  font-size: 16px;
  font-weight: 600;
}

.content-question {
  color: #999999;
  font-size: 15px;
  padding: 10px;
  background-color: #f7f8fc;
}

.page {
  z-index: 9;
  position: absolute;
  bottom: 5px;
}

.post-card {
  position: relative;
  height: 400px;
  padding: 16px;
  background-color: #ffffff;
  overflow-y: auto;
}

.icon-a-13Ashenglve:hover .delete {
  display: block;
  background-color: red;
}

.avatar {
  display: flex;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  margin-bottom: 16px;
}

.post-info {
  display: flex;
  flex-direction: column;
}

.username-level {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.username {
  font-size: 16px;
  font-weight: bold;
  margin-right: 8px;
}
.delete-card {
  margin-left: auto;
  cursor: pointer;
  margin-right: 10px;
}
.level-tag {
  margin: 0;
}

.post-time {
  font-size: 10px;
  color: #909399;
}

.post-content {
  margin-top: 10px;

  p {
    margin: 5px 0;
    font-size: 20px;
    padding-left: 80px;
  }
}

.reply {
  padding: 20px;
  background-color: #f7f8fc;
}

.iconfont {
  font-size: 18px;
}

:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}



.el-table__empty-block{
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  min-height: 60px;
  position: sticky;
  text-align: center;
  width: 100%;
  border-top: 1px solid #ebeef5;  border-bottom: 1px solid #ebeef5;
}



.el-table__empty-text{
  color: var(--el-text-color-secondary);
  line-height: 60px;
  width: 50%;
}
</style>